<template>
	<view class="rule-page flex-col align-center" :style="{paddingTop:calculateHeight}">
		<x-card background="#000" color="#FFF" border="none" fontWeight="800">准备工作</x-card>
		<scroll-view style="height: 100vh;" scroll-y>
			<view class="flex-col align-center">
				
			<view class="" style="width: 100vw;">
				<x-card fontSize="30rpx" background="#000" color="#FFF" border="none">人数: 2 人以上</x-card>
				<x-card fontSize="30rpx" background="#000" color="#FFF" border="none">准备:酒水,饮料,辣牛肉等</x-card>
				<x-card fontSize="30rpx" background="#000" color="#FFF" border="none">过程:大家依此抽取卡牌，然后按照卡牌内容进行惩罚。</x-card>
			</view>
			<x-card background="#000" color="#FFF" border="none" margin="30rpx 0 0" fontWeight="800">卡牌介绍</x-card>
			<view class="" style="width: 100vw;">
				<view class="" v-for="(item,index) in cardList" :key="index">
					<x-card fontSize="30rpx" background="#000" color="#FFF" border="none">{{index+1}}、{{item.val}}</x-card>
					<x-card fontSize="30rpx" background="#000" color="#FFF" border="none">{{item.text}} </x-card>
				</view>
				
			</view>
			<x-card fontSize="30rpx" background="#000" color="#FFF" border="none">点击空白返回</x-card>
			<view class="" style="height: 250rpx;">
				
			</view>
			</view>
		</scroll-view>
		
	</view>
</template>

<script >
	// #ifdef VUE3
	import {
		getCurrentInstance
	} from 'vue'
	import {CARD} from '../game/data.js'
	// #endif
	export default {
		data() {
			return {
				cardList:CARD
			}
		},
		computed: {
			calculateHeight() {
				const {
					globalProperties: global
				} = getCurrentInstance().appContext.config;
				return `calc(${global.statusBarHeight}px)`;
				// // #ifdef VUE2
				// return `${this.statusHeight}px + ${this.height}rpx`;
				// // #endif
			},
		},
		methods: {
			
		}
	}
</script>

<style lang="scss" scoped>
 .rule-page{
	 background: rgba(0, 0, 0, 0.85);
	 position: fixed;
	 top: 0;
	 left: 0;
	 width: 100vw;
	 z-index: 99999;
 }
</style>
